import React from 'react';

// Table 组件
interface TableProps {
  children: React.ReactNode;
  className?: string;
}

const Table: React.FC<TableProps> = ({ children, className = '' }) => {
  return <table className={`w-full border-collapse ${className}`}>{children}</table>;
};

// TableHeader 组件
interface TableHeaderProps {
  children: React.ReactNode;
}

const TableHeader: React.FC<TableHeaderProps> = ({ children }) => {
  return <thead>{children}</thead>;
};

// TableBody 组件
interface TableBodyProps {
  children: React.ReactNode;
}

const TableBody: React.FC<TableBodyProps> = ({ children }) => {
  return <tbody>{children}</tbody>;
};

// TableRow 组件
interface TableRowProps {
  children: React.ReactNode;
  className?: string;
}

const TableRow: React.FC<TableRowProps> = ({ children, className = '' }) => {
  const baseClasses = 'border-b border-border-light dark:border-border-dark hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-colors';
  const classes = `${baseClasses} ${className}`;

  return <tr className={classes}>{children}</tr>;
};

// TableHead 组件
interface TableHeadProps {
  children: React.ReactNode;
  className?: string;
  colSpan?: number;
}

const TableHead: React.FC<TableHeadProps> = ({ children, className = '', colSpan }) => {
  const baseClasses = 'h-12 px-4 text-left text-sm font-medium text-slate-700 dark:text-slate-300';
  const classes = `${baseClasses} ${className}`;

  return <th className={classes} colSpan={colSpan}>{children}</th>;
};

// TableCell 组件
interface TableCellProps {
  children: React.ReactNode;
  className?: string;
  colSpan?: number;
}

const TableCell: React.FC<TableCellProps> = ({ children, className = '', colSpan }) => {
  const baseClasses = 'h-12 px-4 text-sm';
  const classes = `${baseClasses} ${className}`;

  return <td className={classes} colSpan={colSpan}>{children}</td>;
};

export { Table, TableHeader, TableBody, TableRow, TableHead, TableCell };